<template>
  <div class="zxr">
    <!-- 头部开始 -->
    <div class="zxr_top_class">
      <div class="zxr_top_search">
        <p>特色课</p>
        <van-icon name="search" size="20" style="margin-right:10px"></van-icon>
      </div>

      <div class="zxr_sort">
        <!-- <van-dropdown-menu active-color="#1989fa">
          <van-dropdown-item v-model="value1" :options="option1" title="分类">
          </van-dropdown-item>
          <van-dropdown-item
            v-model="value2"
            :options="option2"
            title="排序"
          ></van-dropdown-item>
          <van-dropdown-item
            v-model="value3"
            :options="option3"
            title="筛选"
          ></van-dropdown-item>
        </van-dropdown-menu> -->
      </div>
    </div>

    <!-- 特色课程 -->
    <div class="zxr_list">
      <ul v-for="(item, index) in listTitle" :key="index" class="zxr_user_list">
        
          <li @click="params(item)">
            <p style="padding-top: 12px">{{ item.title }}</p>
            <p class="zxr_time" >
              <van-icon name="clock-o" style="margin-right:-28px"></van-icon>
              <span >{{item.start_play_date|formatDate}}~{{item.end_play_date|formatData}}</span>
              <span>共{{item.total_periods}}课时</span>
              </p>
            <p class="zxr_image">
              <img :src="item.teachers_list[0].teacher_avatar" style="width: 10%; height: 60%; border-radius: 20%;
              margin-left:12px"/>
              
              <span style="color:rgba(0,0,0,.45)">{{item.teachers_list[0].teacher_name}}</span>
            </p>
            <p class="zxr_num">
             <span style="color:rgba(0,0,0,.45)">{{item.sales_num}}人已报名</span> 
             <span style="color:#44a426">免费</span>
              </p>
          </li>
  
      </ul>
    </div>
  </div>
</template>
<script>
import { zxrfen, zxrlist } from "../../../utils/http.js";
export default {
  name: "",
  components: {},
  props: [],
  data() {
    return {
      value1: "",
      page: 1,
      listTitle: [],
      userList: null,
      value2: "a",
      option2: [
        { text: "综合排序", value: "a" },
        { text: "最新", value: "b" },
        { text: "最热", value: "c" },
        { text: "价格从低到高", value: "d" },
        { text: "价格从高到低", value: "e" },
      ],
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.getList();
  },
  methods: {
    getList() {
      zxrlist().then((res) => {
        console.log(res)
        this.listTitle = res.list;
      });
    },

    params(value){
      var id=value.id
      var type=value.course_type
      console.log(id,type)
      this.$router.push({
        name:"detail",
        params:{
          id:id,
          courseType:type
        }
        
      })
    }
  },

 filters: {
      formatDate: function (value) {
        let date = new Date(value);
     
        let MM = date.getMonth() + 1;
        MM = MM < 10 ? ('0' + MM) : MM;
        let d = date.getDate();
        d = d < 10 ? ('0' + d) : d;
        let h = date.getHours();
        h = h < 10 ? ('0' + h) : h;
        let m = date.getMinutes();
        m = m < 10 ? ('0' + m) : m;
        let s = date.getSeconds();
        s = s < 10 ? ('0' + s) : s;
        return  MM + '月' + d + '日' + h + ':' + m ;
      },
        formatData: function (value) {
        let date = new Date(value);
     
        let MM = date.getMonth() + 1;
        MM = MM < 10 ? ('0' + MM) : MM;
        let d = date.getDate();
        d = d < 10 ? ('0' + d) : d;
        let h = date.getHours();
        h = h < 10 ? ('0' + h) : h;
        let m = date.getMinutes();
        m = m < 10 ? ('0' + m) : m;
        let s = date.getSeconds();
        s = s < 10 ? ('0' + s) : s;
        return  MM + '月' + d + '日';
      }
 },

};
</script>
<style scoped lang="scss">
@import "../../../assets/css/index.scss";

.zxr {
  width: 100%;
  height: 100%;
  position: relative;
}
/* 头部 */
.zxr_top_class {
  width: 100%;
  height: 70px;
  font-size: 24px;
  background-color: #fff;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000
}
.zxr_top_search {
  @include FlexArroud();
  width: 100%;
  line-height: 40px;
}
.van-icon {
  margin-right: -40px;
  line-height: 40px;
}
.zxr_top_class p {
  margin-left: 40px;
}

/* 排序 */
.zxr_sort {
  width: 100%;
  height: 100%;
}

/* 列表 */
.zxr_list {
  width: 100%;
  height: 100%;
  flex: 1;
  text-indent: 12px;
  margin-top: 70px;
  background-color: #eee !important;
}
.zxr_user_list {
  width: 100%;
  height: 100%;
  background-color: #eee;
  font-size: 16px;
  padding-top: 20px;
  
}
.zxr_user_list li {
  width: 92%;
  height: 160px;
  border-radius: 5px;
  margin: 0 auto;
  background-color: #fff;
}
.zxr_time{
  width: 100%;
    @include FlexArroud()
}
.zxr_image{
   display: flex;
  justify-content: start;
  align-items: center;
  height: 55px

}
.zxr_num{
  @include FlexSpace();
  width: 90%;
  height: 36px;
  margin: 0 auto;
  line-height: 36px;
  border-top: 1px solid #f5f5f5;

}
</style>